<template>
  <div class="dashboard-editor-container">

    <el-card shadow="hover" style="height: 200px">
      <div slot="header">
        <svg-icon icon-class="data" class-name="card-panel-icon"/>
        <span>累计数据统计</span>
      </div>
      <PanelGroup ref="PanelGroup" search-type="total"></PanelGroup>
    </el-card>
    <br/>
    <el-card shadow="hover" style="height: 200px">
      <div slot="header">
        <svg-icon icon-class="data" class-name="card-panel-icon"/>
        <span>当月数据统计</span>
      </div>
      <PanelGroup ref="PanelGroup" search-type="curMonth"></PanelGroup>
    </el-card>
    <br/>
    <el-card shadow="hover" v-if="p1 || p2">
      <div slot="header">
        <svg-icon icon-class="icon_audit" class-name="card-panel-icon"/>
        <span>待审核</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="toMoreAudit">更多</el-button>
      </div>
      <el-tabs v-model="activeName1" @tab-click="handleClick">
        <el-tab-pane :label="label1" name="0" v-if="p1">
          <rescuemanageraudittable ref="rescuemanageraudittable"
                                   v-bind:defaultCurrentPage="1"
                                   v-bind:defaultPageSize="5"
                                   v-bind:defaultTableSearchParam="{auditStatus:'0'}"></rescuemanageraudittable>
        </el-tab-pane>
        <el-tab-pane :label="label2" name="1" v-if="p2">
          <rescuedriveraudittable ref="rescuedriveraudittable"
                                  v-bind:defaultCurrentPage="1"
                                  v-bind:defaultPageSize="5"
                                  v-bind:defaultTableSearchParam="{auditStatus:'0'}"></rescuedriveraudittable>
        </el-tab-pane>
        <el-tab-pane :label="label3" name="2" v-if="p2">
          <rescueagentaudittable ref="rescueagentaudittable"
                                 v-bind:defaultCurrentPage="1"
                                 v-bind:defaultPageSize="5"
                                 v-bind:defaultTableSearchParam="{auditStatus:'0'}"></rescueagentaudittable>
        </el-tab-pane>
        <el-tab-pane :label="label4" name="3" v-if="p2">
          <insuranceservicesupplieraudittable ref="insuranceservicesupplieraudittable"
                                              v-bind:defaultCurrentPage="1"
                                              v-bind:defaultPageSize="5"
                                              v-bind:defaultTableSearchParam="{auditStatus:'0'}"></insuranceservicesupplieraudittable>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <br/>
    <el-card shadow="hover" v-if="p1 || p2">
      <div slot="header">
        <svg-icon icon-class="icon_audit" class-name="card-panel-icon"/>
        <span>待处理</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="toMoreAccident">更多</el-button>
      </div>
      <el-table
        :data="tableData"
        border
        empty-text="暂无数据"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        v-loading="tableLoading">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="保险类型:" label-width="110px">
                    <span>{{ props.row.insuranceClassifyName }}</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="7">
                  <el-form-item label="报案时间:" label-width="110px">
                    <span>{{ props.row.accidentReportTime }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="10">
                  <el-form-item label="报案地点:" label-width="110px">
                    <span>{{props.row.accidentReportAddress}}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="7">
                  <el-form-item label="处理进度:" label-width="110px">
                    <el-tag v-if="props.row.accidentReportStatus!=null && props.row.accidentReportStatus!=''"
                            :type="convertAccidentReportStatus(props.row.accidentReportStatus)[0]">
                      {{convertAccidentReportStatus(props.row.accidentReportStatus)[1]}}
                    </el-tag>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="事故描述:" label-width="110px">
                    <el-tooltip :content="props.row.accidentDesc" placement="bottom" effect="light">
                      <span class="desc">{{props.row.accidentDesc}}</span>
                    </el-tooltip>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="7">
                  <el-form-item label="定损金额:" label-width="110px">
                    {{props.row.lossAssessmentAmount == null ? '未定' : props.row.lossAssessmentAmount}}
                  </el-form-item>
                </el-col>
                <el-col :span="10">
                  <el-form-item label="赔付金额:" label-width="110px">
                    {{props.row.payAmount == null ? '未定' : props.row.payAmount}}
                  </el-form-item>
                </el-col>
                <el-col :span="7">
                  <el-form-item label="付款方式:" label-width="110px">
                    <el-tag
                      :type="convertPayMethod(props.row.payMethod)[0]">
                      {{convertPayMethod(props.row.payMethod)[1]}}
                    </el-tag>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column
          type="selection"
          width="40">
        </el-table-column>
        <el-table-column
          label="事故编号"
          property="acidentNo"
          width="110">
        </el-table-column>
        <el-table-column
          label="订单号"
          property="insuranceOrderNo"
          width="110">
        </el-table-column>
        <el-table-column
          label="保单号"
          property="insuranceNo"
          width="125">
        </el-table-column>
        <el-table-column
          label="投保产品"
          property="insuranceName">
        </el-table-column>
        <el-table-column
          label="出单人"
          property="driverName"
          width="70">
        </el-table-column>
        <el-table-column
          label="出单人手机"
          property="driverTelephone"
          width="95">
        </el-table-column>
        <el-table-column
          label="投保人"
          property="insuranceOrderCustomerName"
          width="60">
        </el-table-column>
        <el-table-column
          label="投保人手机"
          property="insuranceOrderCuestomTelphone"
          width="100">
        </el-table-column>
        <el-table-column
          label="现场图片"
          width="100">
          <template slot-scope="scope">
            <el-button
              @click="viewImages(scope.row.accidentImgs)">查看图片
            </el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <el-dropdown placement="bottom" trigger="click">
              <el-button>
                操作<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>
                  <el-button
                    size="mini"
                    icon="el-icon-view"
                    type="primary"
                    @click="viewData(scope.$index, scope.row)">查&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;看
                  </el-button>
                </el-dropdown-item>
                <el-dropdown-item divided v-if="scope.row.accidentReportProcess==null">
                  <el-button
                    size="mini"
                    icon="el-icon-location"
                    type="warning"
                    @click="reachAccidentScene(scope.$index, scope.row)">抵达现场
                  </el-button>
                </el-dropdown-item>
                <el-dropdown-item divided
                                  v-if="scope.row.accidentReportProcess=='0' || scope.row.accidentReportProcess=='1'">
                  <el-button
                    size="mini"
                    icon="el-icon-rank"

                    @click="lossAssessment(scope.$index, scope.row)">定损金额
                  </el-button>
                </el-dropdown-item>
                <el-dropdown-item divided v-if="scope.row.accidentReportProcess!=null">
                  <el-button
                    size="mini"
                    icon="el-icon-check"
                    type="success"
                    @click="closeCase(scope.$index, scope.row)">结&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;案
                  </el-button>
                </el-dropdown-item>
                <el-dropdown-item divided
                                  v-if="scope.row.accidentReportProcess!=null && scope.row.accidentReportProcess!='2'">
                  <el-button
                    size="mini"
                    icon="el-icon-delete"
                    type="info"
                    @click="cancelAccident(scope.$index, scope.row)">作&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;废
                  </el-button>
                </el-dropdown-item>
                <el-dropdown-item divided>
                  <el-button
                    size="mini"
                    icon="el-icon-time"
                    type="primary"
                    @click="getAccidentReportProcess(scope.$index, scope.row)">处理流程
                  </el-button>
                </el-dropdown-item>
                <!--<el-dropdown-item divided>-->
                <!--<el-button-->
                <!--size="mini"-->
                <!--icon="el-icon-close"-->
                <!--type="danger"-->
                <!--@click="deleteData(scope.$index, scope.row)">删&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;除-->
                <!--</el-button>-->
                <!--</el-dropdown-item>-->
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog title="事故详情" :visible.sync="dialogFormVisible" top="2vh" width="70%">
      <div style="height:500px;overflow-y: auto">
        <el-row>
          <el-col :span="4" class="m-col">事故编号</el-col>
          <el-col :span="8" class="m-col-left">{{accidentReportData.acidentNo}}</el-col>
          <el-col :span="4" class="m-col-left">订单号</el-col>
          <el-col :span="8" class="m-col-left">{{accidentReportData.insuranceOrderNo}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="m-col">保单号</el-col>
          <el-col :span="20" class="m-col-left">{{accidentReportData.insuranceNo}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="m-col">投保产品</el-col>
          <el-col :span="20" class="m-col-left">{{accidentReportData.insuranceName}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="m-col">报案时间</el-col>
          <el-col :span="8" class="m-col-left">{{accidentReportData.accidentReportTime}}</el-col>
          <el-col :span="4" class="m-col-left">报案地点</el-col>
          <el-col :span="8" class="m-col-left">{{accidentReportData.accidentReportAddress}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="m-col" style="height:350px">事故描述</el-col>
          <el-col :span="20" class="m-col-left" style="height:350px;overflow: auto">
            <!--<el-tooltip :content="accidentReportData.accidentDesc" placement="bottom" effect="light">-->
              <!--<span class="desc">{{accidentReportData.accidentDesc}}</span>-->
            <!--</el-tooltip>-->
            <span>{{accidentReportData.accidentDesc}}</span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="m-col">处理进度</el-col>
          <el-col :span="8" class="m-col-left">
            <el-tag v-if="accidentReportData.accidentReportStatus!=null && accidentReportData.accidentReportStatus!=''"
                    :type="convertAccidentReportStatus(accidentReportData.accidentReportStatus)[0]">
              {{convertAccidentReportStatus(accidentReportData.accidentReportStatus)[1]}}
            </el-tag>
          </el-col>
          <el-col :span="4" class="m-col-left">付款方式</el-col>
          <el-col :span="8" class="m-col-left">
            <el-tag
              :type="convertPayMethod(accidentReportData.payMethod)[0]">
              {{convertPayMethod(accidentReportData.payMethod)[1]}}
            </el-tag>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="m-col">定损金额</el-col>
          <el-col :span="8" class="m-col-left">
            {{accidentReportData.lossAssessmentAmount == null ? '未定' : accidentReportData.lossAssessmentAmount}}
          </el-col>
          <el-col :span="4" class="m-col-left">赔付金额</el-col>
          <el-col :span="8" class="m-col-left">
            {{accidentReportData.payAmount == null ? '未定' : accidentReportData.payAmount}}
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="m-col">出单人</el-col>
          <el-col :span="8" class="m-col-left">{{accidentReportData.driverName}}</el-col>
          <el-col :span="4" class="m-col-left">出单人手机</el-col>
          <el-col :span="8" class="m-col-left">{{accidentReportData.driverTelephone}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="m-col">投保人</el-col>
          <el-col :span="8" class="m-col-left">{{accidentReportData.insuranceOrderCustomerName}}</el-col>
          <el-col :span="4" class="m-col-left">投保人手机</el-col>
          <el-col :span="8" class="m-col-left">{{accidentReportData.orderCustomerTelphone}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="m-col-bottom">事故现场图片</el-col>
          <el-col :span="20" class="m-col-bottom-left">
            <div v-for="item in  accidentReportData.accidentImgs">
              <div style="width: 100px;height: 100px;float:left;both:clear;margin-left:10px;margin-top:10px"
                   @click="showImg(item.url)">
                <img :src="baseUrl+item.url"
                     style="width:100%;height:100%;"></img>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      <div slot="footer" class="dialog-footer">

      </div>
    </el-dialog>
    <el-dialog title="抵达现场" :visible.sync="dialogReachAccidentSceneFormVisible" top="10vh">
      <el-form :model="reachAccidentSceneData">
        <el-form-item label="抵达时间" label-width="70px" prop="reachTime">
          <el-date-picker
            v-model="reachAccidentSceneData.reachTime"
            type="datetime"
            placeholder="选择日期时间"
            value-format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="现场描述" label-width="70px" prop="sceneDesc">
          <el-input type="textarea" v-model="reachAccidentSceneData.sceneDesc" auto-complete="off" :rows="8"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogReachAccidentSceneFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleReachAccidentScene">保存</el-button>
      </div>
    </el-dialog>
    <el-dialog title="定损" :visible.sync="dialogLossAssessmentFormVisible" top="10vh">
      <el-form :model="lossAssessmentData">
        <el-form-item label="定损金额" label-width="70px" prop="lossAssessmentAmount">
          <el-input v-model="lossAssessmentData.lossAssessmentAmount" auto-complete="off"
                    style="width:250px"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogLossAssessmentFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleLossAssessment">保存</el-button>
      </div>
    </el-dialog>
    <el-dialog title="结案" :visible.sync="dialogCloseCaseFormVisible" top="10vh">
      <el-form :model="closeCaseData">
        <el-form-item label="定损金额" label-width="70px">
          {{closeCaseData.lossAssessmentAmount}}
        </el-form-item>
        <el-form-item label="免赔金额" label-width="70px" prop="aoadAmount">
          <el-input-number v-model="closeCaseData.aoadAmount" :precision="2" :step="0.01"
                           style="width:250px" @change="aoadAmountChange"></el-input-number>
        </el-form-item>
        <el-form-item label="赔付金额" label-width="70px" prop="payAmount">
          <el-input-number v-model="closeCaseData.payAmount" :precision="2" :step="0.01"
                           style="width:250px"></el-input-number>
        </el-form-item>
        <el-form-item label="支付方式" label-width="70px" prop="payMethod">
          <el-radio-group v-model="closeCaseData.payMethod" @change="payMethodChange" style="width:250px">
            <el-radio :label="'0'">公司垫付</el-radio>
            <el-radio :label="'1'">保险公司直付</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="付款员工" label-width="70px" prop="payEmployee" v-if="showPayInfo">
          <el-select v-model="closeCaseData.payEmployee" placeholder="请选择" style="width:250px">
            <el-option
              v-for="item in allUser"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="付款时间" label-width="70px" prop="payTime" v-if="showPayInfo">
          <el-date-picker
            v-model="closeCaseData.payTime"
            type="datetime"
            placeholder="选择日期时间"
            style="width:250px">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogCloseCaseFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleCloseCase">保存</el-button>
      </div>
    </el-dialog>
    <el-dialog title="作废" :visible.sync="dialogCancelAccidentFormVisible" top="10vh">
      <el-form :model="cancelAccidentData">
        <el-form-item label="作废原因" label-width="70px" prop="invalidReason">
          <el-input type="textarea" v-model="cancelAccidentData.invalidReason" auto-complete="off" :rows="8"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogReachAccidentSceneFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleCancelAccident">保存</el-button>
      </div>
    </el-dialog>
    <el-dialog title="处理流程" :visible.sync="dialogProcessFormVisible" top="10vh">
      <el-form :model="accidentReportProcessData" inline>
        <el-row>
          <el-col :span="12">
            <el-form-item label="事故编号" label-width="70px">
              {{accidentReportProcessData.acidentNo}}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="保单号" label-width="70px">
              {{accidentReportProcessData.insuranceNo}}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="投保产品" label-width="70px">
              {{accidentReportProcessData.insuranceName}}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="处理进度" label-width="70px">
              <el-tag
                v-if="accidentReportProcessData.accidentReportStatus!=null && accidentReportProcessData.accidentReportStatus!=''"
                :type="convertAccidentReportStatus(accidentReportProcessData.accidentReportStatus)[0]">
                {{convertAccidentReportStatus(accidentReportProcessData.accidentReportStatus)[1]}}
              </el-tag>
            </el-form-item>
          </el-col>
        </el-row>
        <el-collapse v-model="activeName" accordion>
          <el-collapse-item title="报案信息" name="1">
            <el-row>
              <el-col :span="12">
                <el-form-item label="报案地点" label-width="70px">
                  {{accidentReportProcessData.accidentReportAddress}}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="报案时间" label-width="70px">
                  {{accidentReportProcessData.accidentReportTime}}
                </el-form-item>
              </el-col>
            </el-row>
          </el-collapse-item>
          <el-collapse-item title="抵达现场" name="2"
                            v-if="this.accidentReportProcessData.accidentReportProcess>='0' && accidentReportProcessData.updatedByName1!=null">
            <el-row>
              <el-col :span="24">
                <el-form-item label="抵达时间" label-width="70px">
                  {{accidentReportProcessData.reachTime}}
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="现场描述" label-width="70px">
                  {{accidentReportProcessData.sceneDesc}}
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="录入员工" label-width="70px">
                  {{accidentReportProcessData.updatedByName1}}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="录入时间" label-width="70px">
                  {{accidentReportProcessData.updatedTime1}}
                </el-form-item>
              </el-col>
            </el-row>
          </el-collapse-item>
          <el-collapse-item title="定损" name="3"
                            v-if="this.accidentReportProcessData.accidentReportProcess>='1' && accidentReportProcessData.updatedByName2!=null">
            <el-row>
              <el-col :span="24">
                <el-form-item label="定损金额" label-width="70px">
                  {{accidentReportProcessData.lossAssessmentAmount}}
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="录入员工" label-width="70px">
                  {{accidentReportProcessData.updatedByName2}}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="录入时间" label-width="70px">
                  {{accidentReportProcessData.updatedTime2}}
                </el-form-item>
              </el-col>
            </el-row>
          </el-collapse-item>
          <el-collapse-item title="赔付" name="4"
                            v-if="this.accidentReportProcessData.accidentReportProcess>='2' && accidentReportProcessData.updatedByName3!=null">
            <el-row>
              <el-col :span="24">
                <el-form-item label="赔付方式" label-width="70px">
                  <el-tag
                    :type="convertPayMethod(accidentReportProcessData.payMethod)[0]">
                    {{convertPayMethod(accidentReportProcessData.payMethod)[1]}}
                  </el-tag>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="免赔金额" label-width="70px">
                  {{accidentReportProcessData.aoadAmount}}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="赔付金额" label-width="70px">
                  {{accidentReportProcessData.payAmount}}
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="付款员工" label-width="70px" v-if="accidentReportProcessData.payMethod==0">
                  {{accidentReportProcessData.payEmployee}}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="付款时间" label-width="70px" v-if="accidentReportProcessData.payMethod==0">
                  {{accidentReportProcessData.payTime}}
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="录入员工" label-width="70px">
                  {{accidentReportProcessData.updatedByName3}}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="录入时间" label-width="70px">
                  {{accidentReportProcessData.updatedTime3}}
                </el-form-item>
              </el-col>
            </el-row>
          </el-collapse-item>
          <el-collapse-item title="作废" name="5"
                            v-if="accidentReportProcessData.accidentReportProcess!=null && accidentReportProcessData.accidentReportProcess=='3'">
            <el-row>
              <el-col :span="24">
                <el-form-item label="操作人" label-width="70px">
                  {{accidentReportProcessData.updatedByName4}}
                </el-form-item>
              </el-col>
            </el-row>
          </el-collapse-item>
        </el-collapse>
      </el-form>
      <div slot="footer" class="dialog-footer">

      </div>
    </el-dialog>
    <el-dialog title="现场图片" :visible.sync="dialogTupianFormVisible" top="5vh">
      <div style="height:300px">
        <div style="text-align: center" v-if="images.length == 0">暂无相关图片</div>
        <div v-for="(item,index) in  images" v-if="images.length != 0">
          <div style="width: 100px;height: 100px;float:left;both:clear;margin-left:10px;margin-top:10px"
               @click="showImg1(item.url,index)">
            <img :src="baseUrl+item.url"
                 style="width:100%;height:100%;"></img>
          </div>
        </div>
      </div>
      <!--<div style="text-align: center" v-if="images.length != 0">{{images.length != 0 ? images[imgIndex].title : ''}}-->
      <!--</div>-->
      <!--<el-carousel height="250px" @change="orderImagesChange" :autoplay="false" v-if="images.length != 0">-->
      <!--<el-carousel-item v-for="item in imgUrl" :key="item.url">-->
      <!--<img :src="item" width="100%">-->
      <!--</el-carousel-item>-->
      <!--</el-carousel>-->
      <!--<br/>-->
      <!--<el-row v-if="images.length != 0">-->
      <!--<el-col :span="7">&nbsp;</el-col>-->
      <!--<el-col :span="10">执照时间：{{images.length != 0 ? images[imgIndex].takeTime : ''}}</el-col>-->
      <!--<el-col :span="7">&nbsp;</el-col>-->
      <!--</el-row>-->
      <!--<el-row v-if="images.length != 0">-->
      <!--<el-col :span="7">&nbsp;</el-col>-->
      <!--<el-col :span="10">执照地点：{{images.length != 0 ? images[imgIndex].takeAddress : ''}}</el-col>-->
      <!--<el-col :span="7">&nbsp;</el-col>-->
      <!--</el-row>-->
      <!--<el-row v-if="images.length != 0">-->
      <!--<el-col :span="7">&nbsp;</el-col>-->
      <!--<el-col :span="10">上传时间：{{images.length != 0 ? images[imgIndex].uploadTime : ''}}</el-col>-->
      <!--<el-col :span="7">&nbsp;</el-col>-->
      <!--</el-row>-->
      <!--<el-row v-if="images.length != 0">-->
      <!--<el-col :span="7">&nbsp;</el-col>-->
      <!--<el-col :span="10">上传地点：{{images.length != 0 ? images[imgIndex].uploadAddress : ''}}</el-col>-->
      <!--<el-col :span="7">&nbsp;</el-col>-->
      <!--</el-row>-->
      <div slot="footer" class="dialog-footer">

      </div>
    </el-dialog>
    <el-dialog title="查看图片" :visible.sync="dialogImgFormVisible" top="10vh">
      <div class="viewImg" :style="{transform:'rotate('+roteVal+'deg)'}" @click="roteImg">
        <img :src="baseUrl+imgUrlaa" style="width:80%;height: auto">
      </div>
      <div slot="footer" class="dialog-footer">

      </div>
    </el-dialog>
    <el-dialog title="查看图片" :visible.sync="dialogImgFormVisible1" top="10vh">
      <div style="text-align: center" v-if="images.length != 0">{{images.length != 0 ? images[imgIndex].title : ''}}
      </div>
      <div class="viewImg" :style="{transform:'rotate('+roteVal+'deg)'}" @click="roteImg">
        <img :src="baseUrl+imgUrlaa1" style="width:80%;height: auto">
      </div>
      <el-row v-if="images.length != 0">
        <el-col :span="7">&nbsp;</el-col>
        <el-col :span="10">执照时间：{{images.length != 0 ? images[imgIndex].takeTime : ''}}</el-col>
        <el-col :span="7">&nbsp;</el-col>
      </el-row>
      <el-row v-if="images.length != 0">
        <el-col :span="7">&nbsp;</el-col>
        <el-col :span="10">执照地点：{{images.length != 0 ? images[imgIndex].takeAddress : ''}}</el-col>
        <el-col :span="7">&nbsp;</el-col>
      </el-row>
      <el-row v-if="images.length != 0">
        <el-col :span="7">&nbsp;</el-col>
        <el-col :span="10">上传时间：{{images.length != 0 ? images[imgIndex].uploadTime : ''}}</el-col>
        <el-col :span="7">&nbsp;</el-col>
      </el-row>
      <el-row v-if="images.length != 0">
        <el-col :span="7">&nbsp;</el-col>
        <el-col :span="10">上传地点：{{images.length != 0 ? images[imgIndex].uploadAddress : ''}}</el-col>
        <el-col :span="7">&nbsp;</el-col>
      </el-row>
      <div slot="footer" class="dialog-footer">

      </div>
    </el-dialog>

  </div>
</template>

<style scoped>
  .viewImg {
    text-align: center
  }

  .page {
    text-align: center;
    margin-top: 20px;
  }

  .query-form {
    border-bottom: 1px solid #ebeef5;
    padding-top: 25px;
  }

  .demo-table-expand {
    font-size: 0;
  }

  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }

  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }

  .m-col {
    border: 1px solid #ebeef5;
    border-bottom: none;
    padding-left: 10px;
    height: 40px;
    line-height: 40px;
    color: #909399;
    font-weight: 500;
  }

  .m-col-left {
    border: 1px solid #ebeef5;
    border-left: none;
    border-bottom: none;
    padding-left: 10px;
    height: 40px;
    line-height: 40px;
  }

  .m-col-bottom {
    border: 1px solid #ebeef5;
    padding-left: 10px;
    height: 250px;
    line-height: 250px;
    color: #909399;
    font-weight: 500;
  }

  .m-col-bottom-left {
    border: 1px solid #ebeef5;
    border-left: none;
    padding-left: 10px;
    height: 250px;
    overflow-y: auto;
  }

  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }

  .desc {
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box; /** 将对象作为伸缩盒子模型显示 **/
    -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
    -webkit-line-clamp: 1; /** 显示的行数 **/
    overflow: hidden; /** 隐藏超出的内容 **/
  }
</style>

<script>
  import PanelGroup from '../components/PanelGroup'
  import rescuemanageraudittable from '@/views/serviceprovider/common/rescueManagerAuditTable.vue'
  import rescuedriveraudittable from '@/views/serviceprovider/common/rescueDriverAuditTable.vue'
  import rescueagentaudittable from '@/views/serviceprovider/common/rescueAgentAuditTable.vue'
  import insuranceservicesupplieraudittable from '@/views/serviceprovider/common/insuranceServiceSupplierAuditTable.vue'

  import accidentReportApi from '@/api/accidentReportApi'
  import userApi from '@/api/userApi'
  import insuranceClassifyApi from '@/api/insuranceClassifyApi'
  import rescueEmployeeApi from '@/api/rescueEmployeeApi'
  import rescueAgentApi from '@/api/rescueAgentApi'
  import insuranceServiceEmployeeApi from '@/api/insuranceServiceEmployeeApi'


  export default {
    components: {
      rescuemanageraudittable,
      rescuedriveraudittable,
      rescueagentaudittable,
      insuranceservicesupplieraudittable,
      PanelGroup
    },
    created() {

      this.listAllInsuranceClassify()

      this.listTableData()

      this.p2 = this.permissionValid.validAction(this.permissionValid.permissionRule.rescueEmployee.auditRescueCompanyDriver)
      this.p1 = this.permissionValid.validAction(this.permissionValid.permissionRule.rescueEmployee.auditRescueCompanyManager)
      //this.countAuditingRescueCompanyManager()
      //this.countAuditingRescueCompanyDriver()
      //this.countAuditingRescueCompanyAgent()
      //this.countAuditingInsuranceCompanyManager()


//      setInterval(() => {
//        this.$refs.insuranceservicesupplieraudittable.listTableData({auditStatus: '0'}, 1, 50)
//
//        this.label4 = '保险服务商审核（' + this.total + '）'
//      }, 3000)


      if (this.p1) {
        this.activeName1 = '0'
      } else {
        this.activeName1 = '1'
      }
    },
    data() {
      return {
        baseUrl: process.env.IMG_BASE_URL,
        timer: null,
        label1: '救援公司审核（0）',
        label2: '救援司机审核（0）',
        label3: '救援代理审核（0）',
        label4: '保险服务商审核（0）',
        temRescueManagerNum: 0,
        temRescueDriverNum: 0,
        temRescueAgentNum: 0,
        temInsuranceManagerNum: 0,
        p1: false,
        p2: false,
        activeName: '0',
        activeName1: '0',
        total: 0,
        toMoreUrl: '/service/provider/manager/list',

        roteVal: 0,
        allInsuranceClassify: [],

        allUser: [],
        tableLoading: true,

        dialogTupianFormVisible: false,
        dialogFormVisible: false,
        tableSearchParam: {
          accidentReportStatusArr: ['0']
        },
        accidentReportData: {},
        tableData: [],
        currentPage: 1,
        pageSize: 5,

        dialogReachAccidentSceneFormVisible: false,
        reachAccidentSceneData: {
          id: '',
          currentProcess: '',
          reachTime: '',
          sceneDesc: ''
        },
        dialogLossAssessmentFormVisible: false,
        lossAssessmentData: {
          id: '',
          currentProcess: '',
          lossAssessmentAmount: ''
        },
        dialogCloseCaseFormVisible: false,
        closeCaseData: {
          id: '',
          payMethod: '',
          lossAssessmentAmount: '',
          aoadAmount: '',
          payAmount: '',
          payEmployee: '',
          payTime: '',
          currentProcess: ''
        },
        dialogCancelAccidentFormVisible: false,
        cancelAccidentData: {
          id: '',
          currentProcess: '',
          invalidReason: ''
        },
        multipleSelection: [],
        images: [],
        imgUrlaa: '',
        dialogImgFormVisible: false,
        imgUrl: [],
        imgIndex: '0',
        showPayInfo: false,
        dialogProcessFormVisible: false,
        imgUrlaa1: '',
        dialogImgFormVisible1: false,
        accidentReportProcessData: {},
        tabIndex: '0'
      }
    },
    methods: {
      countAuditingRescueCompanyManager() {
        let that = this
        setTimeout(function () {
          rescueEmployeeApi.countAuditingRescueCompanyManager((res) => {

            if (res != that.temRescueManagerNum) {
              that.temRescueManagerNum = res
              that.label1 = '救援公司审核（' + that.temRescueManagerNum + '）'
              if (that.tabIndex == '0')
                that.$refs.rescuemanageraudittable.listTableData({auditStatus: '0'}, 1, 50)
            }
            that.countAuditingRescueCompanyManager()
          }, () => {
          })
        }, 1000);
      },
      countAuditingRescueCompanyDriver() {
        let that = this
        setTimeout(function () {
          rescueEmployeeApi.countAuditingRescueCompanyDriver((res) => {

            if (res != that.temRescueDriverNum) {
              that.temRescueDriverNum = res
              that.label2 = '救援司机审核（' + that.temRescueDriverNum + '）'
              if (that.tabIndex == '1')
                that.$refs.rescuedriveraudittable.listTableData({auditStatus: '0'}, 1, 50)
            }

            that.countAuditingRescueCompanyDriver()

          }, () => {
          })
        }, 1000);
      },
      countAuditingRescueCompanyAgent() {
        let that = this
        setTimeout(function () {
          rescueAgentApi.countAuditingRescueCompanyAgent((res) => {
            if (res != that.temRescueAgentNum) {
              that.temRescueAgentNum = res
              that.label3 = '救援代理审核（' + that.temRescueAgentNum + '）'
              if (that.tabIndex == '2')
                that.$refs.rescueagentaudittable.listTableData({auditStatus: '0'}, 1, 50)
            }

            that.countAuditingRescueCompanyAgent()

          }, () => {
          })
        }, 1000);
      },
    /*  countAuditingInsuranceCompanyManager() {
        let that = this
        setTimeout(function () {
          insuranceServiceEmployeeApi.countAuditingInsuranceCompanyManager((res) => {
            if (res != that.temInsuranceManagerNum) {
              that.temInsuranceManagerNum = res
              that.label4 = '保险服务商审核（' + that.temInsuranceManagerNum + '）'
              if (that.tabIndex == '3')
                that.$refs.insuranceservicesupplieraudittable.listTableData({auditStatus: '0'}, 1, 50)
            }

            that.countAuditingInsuranceCompanyManager()

          }, () => {
          })
        }, 1000);
      },*/
      handleClick(tab, event) {
        this.tabIndex = tab.index + ''
        let that = this
        switch (this.tabIndex) {
          case '0':
            this.toMoreUrl = '/service/provider/manager/list'
            setTimeout(function () {
              that.$refs.rescuemanageraudittable.listTableData({auditStatus: '0'}, 1, 50)
            }, 500);

            break
          case '1':
            this.toMoreUrl = '/service/provider/driver/list'
            setTimeout(function () {
              that.$refs.rescuedriveraudittable.listTableData({auditStatus: '0'}, 1, 50)
            }, 500);

            break
          case '2':
            this.toMoreUrl = '/service/provider/agent/list'
            setTimeout(function () {
              that.$refs.rescueagentaudittable.listTableData({auditStatus: '0'}, 1, 50)
            }, 500);

            break
          case '3':
            this.toMoreUrl = '/service/provider/insurance/list'
            setTimeout(function () {
              that.$refs.insuranceservicesupplieraudittable.listTableData({auditStatus: '0'}, 1, 50)
            }, 500);

            break
        }
      },
      toMoreAudit() {
        this.$router.push({path: this.toMoreUrl})
      },
      toMoreAccident() {
        this.$router.push({path: '/accident/report/list'})
      },
      roteImg() {
        this.roteVal += 90
      },
      listAllInsuranceClassify() {
        insuranceClassifyApi.listAll((res) => {
          this.allInsuranceClassify = res
        }, () => {
        })
      },
      showImg(url) {
        this.roteVal = 0
        this.dialogImgFormVisible = true
        this.imgUrlaa = url
      },
      showImg1(url, index) {
        this.roteVal = 0
        this.dialogImgFormVisible1 = true
        this.imgUrlaa1 = url
        this.imgIndex = index
      },
      viewImages(accidentImgs) {
        this.imgUrl = []
        this.images = []
        for (var uc of accidentImgs) {
          uc.title = '事故图片'
          this.imgUrl.push(uc.url)
          this.images.push(uc)
        }
        this.dialogTupianFormVisible = true
      },
      orderImagesChange(index, oldIndex) {
        this.imgIndex = index
      },
      reachAccidentScene(index, row) {
        accidentReportApi.getAccidentReportProcess(row.id, (res) => {
          this.reachAccidentSceneData.id = row.id
          if (res.accidentReportProcess == null) {
            this.reachAccidentSceneData.currentProcess = '-1'
          } else {
            this.reachAccidentSceneData.currentProcess = res.accidentReportProcess
          }
          this.reachAccidentSceneData.reachTime = res.reachTime
          this.reachAccidentSceneData.sceneDesc = res.sceneDesc
          this.dialogReachAccidentSceneFormVisible = true
        }, () => {
        })
      },
      handleReachAccidentScene() {
        accidentReportApi.reachAccidentScene(this.reachAccidentSceneData, (res) => {
          this.$message({
            type: 'success',
            message: '保存成功!'
          })
          this.dialogReachAccidentSceneFormVisible = false
          this.listTableData()
        }, () => {
        })
      },
      lossAssessment(index, row) {
        accidentReportApi.getAccidentReportProcess(row.id, (res) => {
          this.lossAssessmentData.id = row.id
          this.lossAssessmentData.currentProcess = row.accidentReportProcess
          this.lossAssessmentData.lossAssessmentAmount = row.lossAssessmentAmount
          this.dialogLossAssessmentFormVisible = true
        })
      },
      handleLossAssessment() {
        accidentReportApi.lossAssessment(this.lossAssessmentData, (res) => {
          this.$message({
            type: 'success',
            message: '保存成功!'
          })
          this.dialogLossAssessmentFormVisible = false
          this.listTableData()
        }, () => {
        })
      },
      closeCase(index, row) {
        userApi.listAllUser({}, (res1) => {
          this.allUser = res1
          accidentReportApi.getAccidentReportProcess(row.id, (res) => {
            this.closeCaseData.id = row.id
            this.closeCaseData.currentProcess = row.accidentReportProcess
            this.closeCaseData.lossAssessmentAmount = row.lossAssessmentAmount
            this.closeCaseData.aoadAmount = res.aoadAmount == null ? row.deductionAmount : res.aoadAmount
            if (res.payAmount == null) {
              this.closeCaseData.payAmount = row.lossAssessmentAmount - row.deductionAmount
            } else {
              this.closeCaseData.payAmount = res.payAmount
            }

            this.closeCaseData.payMethod = res.payMethod
            if (res.payMethod === '0') {
              this.showPayInfo = true
            } else {
              this.showPayInfo = false
              this.closeCaseData.payEmployee = ''
              this.closeCaseData.payTime = ''
            }
            this.closeCaseData.payEmployee = res.payEmployee
            this.closeCaseData.payTime = res.payTime
            this.closeCaseData.payMethod = res.payMethod

            this.dialogCloseCaseFormVisible = true
          })
        }, () => {
        })
      },
      payMethodChange(value) {
        if (value === '0') {
          this.showPayInfo = true
        } else {
          this.showPayInfo = false
          this.closeCaseData.payEmployee = ''
          this.closeCaseData.payTime = ''
        }
      },
      aoadAmountChange(value) {
        this.closeCaseData.payAmount = this.closeCaseData.lossAssessmentAmount - value
      },
      handleCloseCase() {
        accidentReportApi.closeCase(this.closeCaseData, (res) => {
          this.$message({
            type: 'success',
            message: '保存成功!'
          })
          this.dialogCloseCaseFormVisible = false
          this.listTableData()
        }, () => {
        })
      },
      cancelAccident(index, row) {
        this.$confirm('事故作废后无法恢复，请确认后再操作?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          accidentReportApi.getAccidentReportProcess(row.id, (res) => {
            this.cancelAccidentData = res
            this.cancelAccidentData.id = row.id
            this.cancelAccidentData.currentProcess = row.accidentReportProcess
            this.cancelAccidentData.invalidReason = res.invalidReason
            this.dialogCancelAccidentFormVisible = true
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消作废'
          })
        })

      },
      handleCancelAccident() {
        accidentReportApi.cancelAccident(this.cancelAccidentData, (res) => {
          this.$message({
            type: 'success',
            message: '保存成功!'
          })
          this.dialogCancelAccidentFormVisible = false
          this.listTableData()
        }, () => {
        })
      },
      getAccidentReportProcess(index, row) {
        accidentReportApi.getAccidentReportProcess(row.id, (res) => {
          this.accidentReportProcessData.currentProcess = row.accidentReportProcess
          this.accidentReportProcessData = res
          this.dialogProcessFormVisible = true
        }, () => {
        })
      },
      listTableData() {
        this.tableLoading = true
        accidentReportApi.list(this.tableSearchParam, this.currentPage, this.pageSize, (res) => {
          this.tableData = res.list
          this.total = res.total
          this.tableLoading = false
        }, () => {
        })
      },
      handleSizeChange(val) {
        this.pageSize = val
        this.listTableData()
      },
      handleCurrentChange(val) {
        this.currentPage = val
        this.listTableData()
      },
      handleSelectionChange(val) {
        this.multipleSelection = []
        for (var ms of val) {
          this.multipleSelection.push(ms.id)
        }
      },
      viewData(index, row) {
        accidentReportApi.get(row.id, (res) => {
          this.accidentReportData = res
          this.dialogFormVisible = true
        }, () => {
        })
      },
      deleteAny() {
        if (this.multipleSelection.length == 0) {
          this.$message({
            type: 'warning',
            message: '请选择记录!'
          })
          return;
        }
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          accidentReportApi.remove(this.multipleSelection, (res) => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.listTableData()
          }, () => {
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      convertPayMethod(payMethod) {
        let convertRet = []
        switch (payMethod) {
          case '0':
            convertRet[0] = 'success'
            convertRet[1] = '公司垫付'
            break
          case '1':
            convertRet[0] = 'success'
            convertRet[1] = '保险公司直付'
            break
          default:
            convertRet[0] = 'success'
            convertRet[1] = '未定'
            break
        }
        return convertRet
      },
      convertAccidentReportStatus(accidentReportStatus) {
        let convertRet = []
        switch (accidentReportStatus) {
          case '0':
            convertRet[0] = 'danger'
            convertRet[1] = '待处理'
            break
          case '1':
            convertRet[0] = 'primary'
            convertRet[1] = '处理中'
            break
          case '2':
            convertRet[0] = 'warning'
            convertRet[1] = '待支付'
            break
          case '3':
            convertRet[0] = 'success'
            convertRet[1] = '已结案'
            break;
          case '4':
            convertRet[0] = 'info'
            convertRet[1] = '已作废'
            break
        }
        return convertRet
      },
      convertOrdErexecuteStatus(orderErexecuteStatus) {
        let convertRet = []
        switch (orderErexecuteStatus) {
          case '1':
            convertRet[0] = ''
            convertRet[1] = '有效期间'
            break
          case '2':
            convertRet[0] = 'warning'
            convertRet[1] = '出险处理'
            break
          case '3':
            convertRet[0] = 'success'
            convertRet[1] = '正常中止'
            break
          case '4':
            convertRet[0] = 'info'
            convertRet[1] = '已赔付中止'
            break
        }
        return convertRet
      }
    }
  }
</script>
